<template>
  <div id="container">
      <div style="position: absolute;z-index:10;display: flex;flex-direction: row">
      <dv-border-box-11 backgroundColor="#19233Ddf" style="width: 400px;padding: 20px;height:800px"  title="示例">
        <div class="bg-color-black" >
          <div class="d-flex jc-center body-box">
            <div style="max-height: 730px;overflow-y: auto;padding-top: 50px">
              <dv-border-box-12 style="height: 160px;overflow-y: hidden" v-for="(item,index) in servers"
                                :key="index" :backgroundColor="item.name==selectItem.name?'#FF8C00':'#19233Ddf'">
                <div style="display: flex;flex-direction: column;padding-top: 10px;cursor: pointer" @click="selectItemClick(item)">
                  <div style="color: white;margin-left: 40px;font-weight: bold;font-size: 24px;margin-top: 10px">
                    {{index+1}}.{{item.name}}
                  </div>
                  <div style="color: white;margin-left: 20px;color: white;font-size: 18px;margin-top: 10px;width: 350px;font-weight: bold">
                    {{item.desc}}
                  </div>
                </div>
              </dv-border-box-12>
            </div>
          </div>
        </div>
      </dv-border-box-11>
        <div style="display: flex;flex-direction: column" v-if="selectItem">
          <component
            :is="selectItem.code"
            :prj="prj"
            style="padding: 10px;height: 100%;width: 98%"
          ></component>
        </div>

      </div>
  </div>

</template>

<script>
import temp from "./temp";
import func_plan from "./func/func_plan";
import func_design from "./func/func_design";
import func_progress from "./func/func_progress";
import func_geo from "./func/func_geo";
import func_bhl from "./func/func_bhl";
import func_stra from "./func/func_stra";
let viewer = null;
import axios from "axios";
import * as Cesium from "cesium/Cesium";
import drawTunnel from "./d3/drawTunnel";
import Util_Projection from "./d3/Util_Projection";
import sub_dataview from "./sub_dataview";
import vkbeautify from "vkbeautify";
import x2js from "x2js";
import profile_model from "./profile_model"
let x2jsObj = new x2js();
let baseUrl = "";
export default {
  props:["prj"],
  components:{func_progress,func_design,func_plan,temp,func_geo,func_bhl,func_stra},
  data() {
    return {
      defs:[],
      MILLdata: null,
      mileage:null,
      LNTY:[],
      entity:[],
      struction:["内轮廓","建筑限界","初衬","二衬"],
      pathArr:[],
      matchedInfo:{},
      selectFile:null,
      id : 0,

      serversTotal:{
        "laoying-struct":[
          {name:"平面线型",desc:"在gis底图（天地图）上展示平面线型（PLAL）数据",code:"func_plan",
            nodeList : [
              {
                'id': 'n1',
                'width': 150,
                'height': 30,
                'coordinate': [20,30],
                'meta': {
                  'prop': 'start',
                  'name': '天地图底图'
                }
              },
              {
                'id': 'n2',
                'width': 150,
                'height': 30,
                'coordinate': [20,110],
                'meta': {
                  'prop': 'approval',
                  'name': '平面线型(PLAL)',
                  "type":"PLAL"
                }
              },
              {
                'id': 'n3',
                'width': 150,
                'height': 30,
                'coordinate': [300,70],
                'meta': {
                  'prop': 'condition',
                  'name': '平面线型二维可视化',
                }
              }
            ],
            linkList : [
              {
                'id': 'l1',
                'startId': 'n1',
                'endId': 'n3',
                'startAt': [100, 15],
                'endAt': [0, 15],
                'meta': null
              },
              {
                'id': 'l2',
                'startId': 'n2',
                'endId': 'n3',
                'startAt': [100, 15],
                'endAt': [0, 15],
                'meta': null
              }
            ]},
          {name:"沿桩衬砌",desc:"根据沿桩衬砌类型表格，对沿桩衬砌类型对应的初喷混凝土、二次衬砌等结构进行三维可视化",code:"func_design",
            nodeList : [
              {
                'id': 'n1',
                'width': 100,
                'height': 30,
                'coordinate': [20,30],
                'meta': {
                  'prop': 'start',
                  'name': '1234'
                }
              },
              {
                'id': 'n2',
                'width': 100,
                'height': 30,
                'coordinate': [200,30],
                'meta': {
                  'prop': 'approval',
                  'name': '3333',
                  'desc': '111111'
                }
              }
            ],
            linkList : [
              {
                'id': 'l1',
                'startId': 'n1',
                'endId': 'n2',
                'startAt': [100, 15],
                'endAt': [0, 15],
                'meta': null
              }
            ]},
          {name:"施工进度",desc:"根据沿桩衬砌类型表格，对沿桩衬砌类型对应的初喷混凝土、二次衬砌等结构进行三维可视化",code:"func_design",
            nodeList : [
              {
                'id': 'n1',
                'width': 100,
                'height': 30,
                'coordinate': [20,30],
                'meta': {
                  'prop': 'start',
                  'name': '1234'
                }
              },
              {
                'id': 'n2',
                'width': 100,
                'height': 30,
                'coordinate': [200,30],
                'meta': {
                  'prop': 'approval',
                  'name': '3333',
                  'desc': '111111'
                }
              }
            ],
            linkList : [
              {
                'id': 'l1',
                'startId': 'n1',
                'endId': 'n2',
                'startAt': [100, 15],
                'endAt': [0, 15],
                'meta': null
              }
            ]},
        ],
        "laoying-geo":[
          {name:"地质剖面",desc:"根据地质剖面GML文件，在三维地形底图上，结合平面线型，终面线型和地层表进行可视化",code:"func_geo",
            nodeList : [
              {
                'id': 'n1',
                'width': 150,
                'height': 30,
                'coordinate': [20,30],
                'meta': {
                  'prop': 'start',
                  'name': '地质剖面图GML',
                }
              },
              {
                'id': 'n2',
                'width': 150,
                'height': 30,
                'coordinate': [20,90],
                'meta': {
                  'prop': 'start',
                  'name': '平面线型(PLAL)',
                }
              },
              {
                'id': 'n3',
                'width': 150,
                'height': 30,
                'coordinate': [20,150],
                'meta': {
                  'prop': 'start',
                  'name': '纵面线型(VERL)',
                }
              },
              {
                'id': 'n4',
                'width': 200,
                'height': 30,
                'coordinate': [400,90],
                'meta': {
                  'prop': 'approval',
                  'name': '地层基本信息(STRA)',
                  'type':"STRA"
                }
              },
              {
                'id': 'n5',
                'width': 200,
                'height': 30,
                'coordinate': [700,90],
                'meta': {
                  'prop': 'condition',
                  'name': '地层剖面可视化',
                }
              }
            ],
            linkList : [
              {
                'id': 'l1',
                'startId': 'n1',
                'endId': 'n4',
                'startAt': [100, 15],
                'endAt': [0, 15],
                'meta': null
              },
              {
                'id': 'l2',
                'startId': 'n2',
                'endId': 'n4',
                'startAt': [100, 15],
                'endAt': [0, 15],
                'meta': null
              },
              {
                'id': 'l3',
                'startId': 'n3',
                'endId': 'n4',
                'startAt': [100, 15],
                'endAt': [0, 15],
                'meta': null
              },
              {
                'id': 'l4',
                'startId': 'n4',
                'endId': 'n5',
                'startAt': [100, 15],
                'endAt': [0, 15],
                'meta': null
              }
            ]},
          {name:"地层产状",desc:"根据地质剖面图，以及各地层倾向倾角数据进行产状建模",code:"func_stra",
            nodeList : [
              {
                'id': 'n1',
                'width': 100,
                'height': 30,
                'coordinate': [20,30],
                'meta': {
                  'prop': 'start',
                  'name': '1234'
                }
              },
              {
                'id': 'n2',
                'width': 100,
                'height': 30,
                'coordinate': [200,30],
                'meta': {
                  'prop': 'approval',
                  'name': '3333',
                  'desc': '111111'
                }
              }
            ],
            linkList : [
              {
                'id': 'l1',
                'startId': 'n1',
                'endId': 'n2',
                'startAt': [100, 15],
                'endAt': [0, 15],
                'meta': null
              }
            ]},
          {name:"地质钻孔",desc:"根据地质钻孔、钻孔地层和地层信息三张表，对地质钻孔进行三维可视化",code:"func_bhl",
            nodeList : [
              {
                'id': 'n1',
                'width': 200,
                'height': 30,
                'coordinate': [20,30],
                'meta': {
                  'prop': 'start',
                  'name': '钻孔基本信息(HDPH)',
                  "type":"HDPH"
                }
              },
              {
                'id': 'n2',
                'width': 200,
                'height': 30,
                'coordinate': [20,90],
                'meta': {
                  'prop': 'start',
                  'name': '位置信息(LOCA)',
                  'type': 'LOCA'
                }
              },
              {
                'id': 'n3',
                'width': 200,
                'height': 30,
                'coordinate': [300,60],
                'meta': {
                  'prop': 'condition',
                  'name': '钻孔点位',
                }
              },
              {
                'id': 'n4',
                'width': 200,
                'height': 30,
                'coordinate': [300,120],
                'meta': {
                  'prop': 'start',
                  'name': '钻孔地层信息（HDPF）',
                  'type': 'HDPF'
                }
              },
              {
                'id': 'n5',
                'width': 200,
                'height': 30,
                'coordinate': [600,90],
                'meta': {
                  'prop': 'condition',
                  'name': '钻孔地层模型',
                }
              },
              {
                'id': 'n6',
                'width': 200,
                'height': 30,
                'coordinate': [600,150],
                'meta': {
                  'prop': 'start',
                  'name': '地层基本信息（STRA）',
                  'type': 'HDPF'
                }
              },
              {
                'id': 'n7',
                'width': 200,
                'height': 30,
                'coordinate': [900,120],
                'meta': {
                  'prop': 'condition',
                  'name': '钻孔地层可视化查询',
                }
              }
            ],
            linkList : [
              {
                'id': 'l1',
                'startId': 'n1',
                'endId': 'n3',
                'startAt': [150, 15],
                'endAt': [0, 15],
                'meta': null
              },
              {
                'id': 'l2',
                'startId': 'n2',
                'endId': 'n3',
                'startAt': [150, 15],
                'endAt': [0, 15],
                'meta': null
              },
              {
                'id': 'l3',
                'startId': 'n3',
                'endId': 'n5',
                'startAt': [150, 15],
                'endAt': [0, 15],
                'meta': null
              },
              {
                'id': 'l4',
                'startId': 'n4',
                'endId': 'n5',
                'startAt': [150, 15],
                'endAt': [0, 15],
                'meta': null
              },
              {
                'id': 'l5',
                'startId': 'n5',
                'endId': 'n7',
                'startAt': [150, 15],
                'endAt': [0, 15],
                'meta': null
              },
              {
                'id': 'l6',
                'startId': 'n6',
                'endId': 'n7',
                'startAt': [150, 15],
                'endAt': [0, 15],
                'meta': null
              }
            ]},

        ]
      },
      servers:[],
      selectItem:{},


    };
  },
  /*
    页面初始化开始执行
  */
  created() {
    this.servers = this.serversTotal[this.prj];
    this.selectItem = this.servers[0];

  },
  /*
    界面初始化完毕执行
   */
  mounted() {
  },
  methods: {
    selectItemClick(item){
      this.selectItem=item;
    },
  }
};

</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.el-table{
  background: #2b334f8f !important;
  color:white !important
}

/*.el-table{*/
/*color:white;*/
/*}*/
.el-table th, .el-table tr,.el-table td{
  border: 0 !important;
  background-color: transparent !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color:#fff !important;
  background-color: rgba(148, 144, 144, 0.3) !important
}
.el-table th, .el-table tr {
  background-color: transparent !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table thead {
  color: white ;
  font-weight: 500;
  background-color: rgba(148, 144, 144, 0.3) !important
}

.el-table__body tr:hover > td{
  background-color:#2b334fff !important;
}
.current-row > td {
  background: #fe81048f !important;
}

#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#mapContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.el-dialog__header{
  background-color: #19233Ddf !important;
}
.el-dialog__body{
  background-color: #19233Ddf !important;
}
.el-dialog__footer{
  background-color: #19233Ddf !important;
}
.el-dialog__title{
  color: white;font-weight: bold;
}
</style>
